<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>函数的扩展</title>
  </head>
  <body>
    <script>
      // 1、函数参数默认值的使用
      // function fun(x, y = 'world') {
      //   console.log(x, y);
      // }
      // fun('hello'); // hello world
      // fun('hello', 'ES6'); // hello ES6
      // fun('hello', ''); // hello

      // 1.1、缺点：参数变量是默认声明的，所以不能用 let 和 const 再次声明
      // function fun(x, y = 10) {
      //   // let y = 20
      //   const y = 30;
      // }
      // fun(); // 报错

      // 1.2、缺点：使用参数默认值时，函数不能有同名参数
      // function fun(x, x, y) {}
      // fun(); // 不报错

      // function fun(x, x, y = 10) {}
      // fun(); // 报错

      // 1.3、函数参数默认值和对象解构赋值默认值结合使用
      // function fun({ x, y = 10 }) {
      //   console.log(x, y);
      // }
      // fun({}); // undefined 10
      // fun({ x: 1 }); // 1 10
      // fun({ x: 5, y: 20 }); // 5 20

      // 1.4、函数参数默认值和数组解构赋值默认值结合使用
      // function fun([a, b = 'Vue']) {
      //   console.log(a, b);
      // }
      // fun([]); // undefined Vue
      // fun(['hello']); // hello Vue
      // fun(['hello', 'React']); // hello React

      // 2、箭头函数
      // 2.1、ES5 函数和箭头函数的区别
      // let res = function (a) {
      //   return a;
      // };
      // 等同于下面
      // let res = a => a;

      // 2.2、函数体的变化
      // let res = () => 'hello world';
      // console.log(res()); // hello world

      // let res = (x, y) => {
      //   let sum = x + y;
      //   return sum;
      // };
      // console.log(res(1, 8)); // 9

      // 2.3 ES5 函数和箭头函数的 this 指向问题
      // let obj = {
      //   name: '张三',
      //   getName: function () {
      //     console.log(this);
      //   }
      // };
      // obj.getName(); // this 指向 obj 对象

      let obj = {
        name: '李四',
        getName: () => {
          console.log(this);
        }
      };
      obj.getName(); // 箭头函数中的 this 继承外层 this，所以指向 window 对象
    </script>
  </body>
</html>
